<script setup lang="ts">
import { defineProps } from "vue"
const { title, background } = defineProps({
  title: {
    required: true,
    type: String,
  },
  background: {
    type: String,
    default: 'transparent'
  }
})
</script>

<template>
  <a-flex vertical class="personal-area" :style="{background:background}">
    <div class="personal-area-box">
      <p class="personal-area-box-title">{{title}}</p>
      <span class="personal-area-box-title-line"></span>
    </div>
    <div class="personal-area-body">
      <slot></slot>
    </div>
  </a-flex>
</template>

<style scoped lang="scss">
.personal-area{
  position: relative;
  margin-top: 2rem;
  min-height: 250px;
  border-radius: 3px;
}
.personal-area-box{
  margin-bottom: .5rem;
  &-title{
    margin:0 0 .2rem 0;
    padding: 0 0 0 .21rem;
    font-weight: bold;
    font-size: 1.5rem;
    &-line{
      display: block;
      width: 3rem;
      padding: 2px 0;
      margin-left: .21rem;
      background: #1f436c;
    }
  }
}
.personal-area-body{
  position: relative;
  padding-left: .21rem;
  padding-right: .21rem;
}
</style>